<template>
  <el-select v-model="selectedValue" placeholder="请选择" :loading="loading" style="width: 200px" filterable clearable>
    <el-option v-for="item in options" :key="item.id" :label="item.label" :value="item.value" />
  </el-select>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

// 选中的值
const selectedValue = ref(null)
// 下拉选项数组
const options = ref([])
// 加载状态/*  */
const loading = ref(false)

// 模拟接口请求函数，实际请替换为你的接口请求
async function fetchOptions() {
  loading.value = true
  try {
    // 模拟接口延迟
    await new Promise(resolve => setTimeout(resolve, 15000))

    // 模拟接口返回数据
    const data = [
      { id: 1, label: '选项一', value: 'option1' },
      { id: 2, label: '选项二', value: 'option2' },
      { id: 3, label: '选项三', value: 'option3' },
    ]

    options.value = data
  } catch (error) {
    ElMessage.error('加载选项失败')
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  fetchOptions()
})
</script>
